<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>


		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

		<style type="text/css">
			table {
				border: 1px solid black;
				width: 100%;
			}

			th {
				height: 50px;
			}

			th,
			td {
				border-bottom: 1px solid #ddd;
				text-align: center;
			}

			.markline {
				background-color: #ffcc66;
			}
		</style>
	</head>
	<body>
		<div id="app">
			
			<table>
				<tr>
					<th>序号</th>
					<th>书名</th>
					<th>作者</th>
					<th>出版社</th>
				</tr>
				
				<tr v-for="book, i in books" :class="{markline:(i%2==0)}">
					<td>{{i+1}}</td>
					<td>{{book.title}}</td>
					<td>{{book.author}}</td>
					<td>{{book.publisher}}</td>
					
				</tr>
				
				
			</table>
			
			
			
			
		</div>

		<script>
			var app = Vue.createApp({
				data() {
					return {
						books: [{
								title: '《精通Vue.js：Web前端开发技术详解》',
								author: '孙卫琴',
								publisher: '清华大学出版社'
							},
							{
								title: '《基于Spring：Java Web开发技术详解》',
								author: '孙卫琴',
								publisher: '清华大学出版社'
							},
							{
								title: '《精通JPA与Hibernate: Java对象持久化技术详解》',
								author: '孙卫琴',
								publisher: '清华大学出版社'
							},
							{
								title: '《大话Java程序设计从入门到精通》',
								author: '孙卫琴',
								publisher: '电子工业出版社'
							},
							{
								title: '《Tomcat与Java Web开发技术详解》',
								author: '孙卫琴',
								publisher: '电子工业出版社'
							},
							{
								title: '《Java面向对象编程》',
								author: '孙卫琴',
								publisher: '电子工业出版社'
							},
							{
								title: '《精通Struts: 基于MVC的Java Web设计与开发》',
								author: '孙卫琴',
								publisher: '电子工业出版社'
							},
							{
								title: '《Java网络编程核心技术详解》',
								author: '孙卫琴',
								publisher: '电子工业出版社'
							},
							{
								title: '《Java逍遥游记》',
								author: '孙卫琴',
								publisher: '电子工业出版社'
							},
							{
								title: '《Hibernate逍遥游记》',
								author: '孙卫琴',
								publisher: '电子工业出版社'
							},
							{
								title: '《Java 2认证考试指南与试题解析》',
								author: '孙卫琴',
								publisher: '上海科学技术出版社'
							}
						]
					}
				}
			});
			var vm = app.mount("#app")
		</script>
	</body>
</html>
